<template>
  <div class="container">
      <div class="distributionWrapper">
        <img alt="" src="@/assets/images/distri_bg.jpg" class="bg">
        <div class="contentLayout">
          <div class="videoItem">
            <img alt="" class="cove" :src="ablumAdd">
            <img alt="" src="@/assets/images/jiaobiao.jpg" class="jiaoBiao">
            <div class="duration">{{this.shareVideoTime}}</div>
          </div>
          <div class="title">{{this.shareTitle}}</div>
          <div class="bottomBox" @click="openShecme">
            <img alt="" src="@/assets/images/publish_button.jpg" class="btn">
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { getTasksDetialInfoById } from "@/api/tuike/qrCode"

export default {
  name: 'share',
  components: {},
  data() {
    return {
      lineChartData: null,
      ablumAdd:'',
      shareTitle:'',
      shareVideoTime:'',
      urlQuery:"",
      canceled:false,
    }
  },
  created() {
      this.ablumAdd = "",
      this.shareTitle ='【超值】美食独家推荐！环境高端，性价比超高！',
      this.shareVideoTime = '00:15'
      this.queryTaskId = this.$route.query.taskId;
      this.taksInfoData = {};
      if(this.queryTaskId === undefined) {
        this.$message.error("活动已经结束！")
      }
      getTasksDetialInfoById(this.$route.query.taskId).then(
        responseData =>{
          this.taksInfoData  = responseData.data
          this.shareTitle = this.taksInfoData['title'];
          this.ablumAdd = this.taksInfoData['imagePath'];
      }).catch(err =>{
        this.canceled = true
        console.log(err)
      })
  },

  methods: {
    openShecme:function(){
      if(this.queryTaskId === undefined || this.canceled){
        this.$message.error("活动已经结束！")
        return
      } else {
        const url = new URL("snssdk1128://openplatform/share");
        var query = url.searchParams;
        let data = this.taksInfoData
        this.shareTitle = data['title'];
        this.ablumAdd = data['imagePath'];
        query.append("client_key", data["clientKey"]);
        query.append("nonce_str", data['nonceStr']);
        query.append("share_to_publish", data["shareToType"]);
        query.append("share_type", data['shareType']);
        query.append("signature", data['signature']);
        query.append("state", data['state']);
        query.append("timestamp", data['timestamp']);
        query.append("video_path", data['videoPath']);
        query.append("title", data['title'])
        query.append("image_path", data['imagePath']);
        let tagList = data['hashTagList'];
        let finalList = [];
        for (let i = 0; i < tagList.length; i++) {
          finalList.push(tagList[i].replace("#",""));
        }
        query.append("hashtag_list", JSON.stringify(finalList));

        //query.append(
        //  "micro_app_info",
        //  JSON.stringify({
        //    appId: "小程序appid",
        //    appTitle: "小程序title",
        //    description: "小程序描述语",
        //    appUrl: "pages/movie/index",
        //  })
        // );
        //window.open(url,);
        window.location.href = url
      }
    },
  }

}
</script>

<style lang="scss" scoped>
.distributionWrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
}


  .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .contentLayout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-top: 3.125rem;
    align-items: center;

  .videoItem {
    position: relative;
    width: 12.5rem;
    height: 16.25rem;
    border-radius: 0.75rem;
    box-shadow:  0px 0px 0px 2px #FE2C55;
    overflow: hidden;
    font-size: 0;

  .cove {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 12.5rem;
    height: 16.25rem;
    object-fit: cover;
  }

  .jiaoBiao {
    z-index: 10;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 7.8125rem;
    height: 1.625rem;
  }
  .duration {
    z-index: 1;
    display: block;
    position: absolute;
    left: 0.3125rem;
    bottom: 0.3125rem;
    width: 2.875rem;
    height: 1.25rem;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.25rem;
    text-align: center;
  }
}

  .title {
    padding: 1.25rem 2rem 0 2rem;
    font-size: 1rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 1.5rem;
    text-align: center;

  }

  .bottomBox {
    flex: 1;
    height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  .btn {
    width: 17.5rem;
    height: 3.75rem;
    border-radius: 1.875rem;
  }

}


}

.emptyBox{
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3.125rem;
  justify-content: center;

.tip{
  font-size: 1.375rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 1.5rem;
}
.guide{
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 0.875rem;
}
}
</style>
